<template>
	<view class="container">
		<view class="text-df padding text-bold">
			反馈类型
		</view>
		<view class="flex justify-start align-center tabs padding text-999">
			<view :class="type==1?'on':''" @click="changeType(1)">
				我有需求
			</view>
			<view class="margin-left" :class="type==2?'on':''" @click="changeType(2)">
				软件体验
			</view>
			<view class="margin-left" :class="type==3?'on':''" @click="changeType(3)">
				软件改进意见
			</view>
		</view>
		<view class="margin-left margin-right margin-bottom">
			<textarea value="" v-model="content" class="bg-white text-13 width-sub padding" placeholder="*请填写您的需求或意见~" />
		</view>
		<view class="cu-form-group padding-top">
			<view class="grid col-3 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index">
				 <image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
		<button @click="submit" class="padding bg-color text-white margin radius10">提交</button>
		<!-- <view class="flex justify-center align-center text-999" @click="toPage('/pages/file/news-list/news-list')">
			<view class="text-df">
				查看回复
			</view>
			<view class="cuIcon-right">
				
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList:[],
				type:1,
				content:'',
				baseUrl:this.$config.baseUrl
			};
		},
		methods:{
			async ChooseImage() {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: (res) => {
							console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req=>{
								this.imgList.push(req.data)
								console.log(this.imgList)
						})
						}
					});
				},
				async submit() {
					if(!this.content){
						this.$util.msg('请完善信息')
						return
					}
					const [err, res] = await this.$jsonPost(this.$api.userReply,{
						type:this.type,
						content:this.content,
						appendixs:this.imgList[0],
						userId: uni.getStorageSync('userId')
					})
					if (res) {
						this.$util.msg(res.message)
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
						
					}
				},
				changeType(e){
					this.type = e
				},
				DelImg(){
					this.imgList =[]
				},
				
				
			toPage(url){
				this.$util.openNewPage(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
// .container {
// 		background: #F8F8F8 !important;
// 		min-height: 100vh;
// 	}
	.tabs{
		view{
			padding: 10rpx 30rpx;
			border: 1px solid #999999;
			border-radius: 26px;
		}
		view.on{
			padding: 10rpx 30rpx;
			color: #333;
			background: #FFDEC0;
			border: 1px solid #ED7200;
			border-radius: 26px;
		}
		
	}
</style>
